<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" activeStyle="color:#3c9cff" lineWidth="60" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="content" v-if="current == 0">
			<view class="item" @click="goToUrl('/pages/products/productDetail08')">
				<u--image :showLoading="true"
					src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/zc/zc.png" width="300rpx"
					height="300rpx"></u--image>
				<view class="right">
					<u--text text="船用甲醇动力解决方案" size=16></u--text>
					<u--text text="动力单元产品" color="#767676" size=14></u--text>
					<!-- <view class="bottom">
						<u--text text="￥" color="#F21E46"></u--text>
						<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
						<u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text>
						<u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
					</view> -->
				</view>
			</view>
		</view>
		<view class="content" v-if="current == 1">
			1
		</view>
		<view class="content" v-if="current == 2">
			2
		</view>
		<view class="content" v-if="current == 3">
			3
		</view>
		<view class="content" v-if="current == 4">
			4
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [{
				name: '船舶升级',
			}, {
				name: '升级政策',
			}, {
				name: '融资租赁'
			}, {
				name: '质保服务'
			}, {
				name: '推荐有礼'
			}],
			current: 0
		}
	},
	methods: {
		change(index) {
			console.log(index)
			this.current = index.index
		},
		// 跳转页面
		goToInput() {
			uni.navigateTo({
				url: '/pages/products/inputVin'
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.content {
	padding: 20rpx 30rpx;

	.item {
		display: flex;
		background-color: white;
		border-radius: 12rpx;
		overflow: hidden;

		.right {
			margin-left: 20rpx;
			padding-top: 40rpx;
			width: 330rpx;

			.bottom {
				display: flex;
				margin-top: 50rpx;

				::v-deep .u-text__value {
					white-space: nowrap !important;
					align-self: flex-end;
				}

				::v-deep .u-text {
					flex: 0;
				}

				::v-deep .u-icon {
					margin-left: auto;
				}
			}
		}
	}



}
</style>
